<template>
	<view class="notice-detail-container full-container">
		<template v-if="id">
			<view class="ads">
				<u-image src="/static/images/banner/banner.jpg" mode="aspectFill" width="100%" height="280rpx"></u-image>
			</view>
			
			<uni-card shadow="none" is-full :title="info.noticeTitle" :sub-title="info.createTime" @click="$tab.navigateTo(`/pages/notice/detail?id=${info.noticeId}`)">
				<up-parse :content="info.noticeContent"></up-parse>
			</uni-card>
		</template>
		<view class="nodata" v-else>
			<up-empty mode="data" icon="/static/images/empty/data.png" text="暂无数据"></up-empty>
		</view>
	</view>
</template>

<script>
	import {getNoticeDetail} from '@/api/system/user'
	export default{
		data(){
			return {
				info:{}
			}
		},
		
		computed:{
			id(){
				return this.$page?.options.id || ''
			}
		},
		
		watch:{
			id(){
				this.fetchDetail()
			}
		},
		
		mounted(){
			this.fetchDetail()
		},
		
		methods:{
			fetchDetail(){
				if(this.id){
					getNoticeDetail(this.id).then(({data}) => {
						this.info = data || {}
						uni.setNavigationBarTitle({
							title:data?.noticeTitle || '公告详情'
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata{
		height: 50vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.notice-detail-container{
		&::v-deep{
			.uni-card__content {
				padding: 24rpx;
				font-size: 30rpx;
				color:#666;
				line-height: 1.6;
				text-indent: 2em;
			}
				
			.uni-card__header-content-title{
				font-size: 32rpx !important;
				font-weight: bold;
				margin-bottom: 6rpx;
			}
			
			.uni-card__header-content-subtitle{
				font-size: 28rpx !important;
			}
			
			.u-text__value{
				font-size: 30rpx !important;
			}
		}
	}
</style>